@page "/dropzone"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Radzen Blazor DropZone
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>DropZone</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Body1">
    Drag/Drop tasks between zones to update task status and order or in the same zone to reorder. 
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    Moving tasks between <strong>"Not started"</strong> and <strong>"Completed"</strong> zones is disallowed using <code>CanDrop</code> callback.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>ItemSelector</code> callback to define which item in which zone will appear, <code>Drop</code> callback to customize the drop logic and 
    <code>ItemRender</code> callback to customize if the item can be dragged, appearance, etc.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo tasks can be dragged between <strong>Not started</strong> (yellow), <strong>Started</strong> (blue), <strong>Completed</strong> (green), and <strong>Deleted</strong> (red) zones, with <code>CanDrop</code> preventing direct moves from "Not started" to "Completed", <code>ItemRender</code> making "Task2" non-draggable, and items deleted when dropped in the Deleted zone.
</RadzenText>

<RadzenExample ComponentName="DropZone" Example="DropZoneConfig">
    <DropZoneConfig />
</RadzenExample>

<RadzenText Anchor="dropzone#can-drop-no-drop-styles" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Define can-drop and no-drop styles
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the built-in <code>.rz-can-drop</code> and <code>.rz-no-drop</code> CSS classes to apply styles and differentiate the DropZones that allow dropping from these that do not. 
</RadzenText>
<RadzenExample ComponentName="DropZone" Example="DropZoneCanDropNoDropStyles">
    <DropZoneCanDropNoDropStyles />
</RadzenExample>

<RadzenText Anchor="dropzone#footer-template" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Define a Footer Template per Drop Zone
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
   Add a footer template to the dropzone to display items below the rendered items.
</RadzenText>
<RadzenExample ComponentName="DropZone" Example="DropZoneFooterTemplate">
    <DropZoneFooterTemplate />
</RadzenExample>
